import styles from './styles.module.css'
import type {FormProps} from 'antd';
import {Button, Checkbox, Flex, Form, Input, message} from 'antd';
import {LockOutlined, UserOutlined} from '@ant-design/icons';
import {useEffect, useState} from "react";
import {useNavigate} from "react-router-dom";
import {useDispatch} from "react-redux";
import {login} from "../../store/slices/auth-slice.ts";
import bg from '../../assets/bg_login.png'
import logo from '../../assets/react.svg'
import {loginAdmin, LoginAdminReqType, loginCode, LoginCodeResponseType} from '../../apis'
import {AppDispatch} from "../../store/inedx.ts";


/**
 * 登录页面
 */
function Login() {
    const navigate = useNavigate();
    const dispatch = useDispatch<AppDispatch>();
    const [messageApi, contextHolder] = message.useMessage();
    const [loginCodeResponse, setLoginCodeResponse] = useState<LoginCodeResponseType>({image: '', loginId: ''});
    const [loginRequest] = useState<LoginAdminReqType>({
        username: '',
        password: '',
        loginCode: '',
        loginId: ''
    });

    const onRefreshLoginCode = async () => {
        setLoginCodeResponse(await loginCode());
    }

    const onFinish: FormProps<LoginAdminReqType>['onFinish'] = async (values) => {
        const resp = await loginAdmin({...values, loginId: loginCodeResponse.loginId!});
        if (resp.code === 0 && resp.data) {
            dispatch(login({username: 'admin', token: resp.data}));
            navigate('/namespace');
        } else {
            messageApi.error(resp.message).then();
        }
    };

    useEffect(() => {
        onRefreshLoginCode().then();
    }, []);

    const FormView = () => {
        return (
            <>
                <Form
                    name="login"
                    initialValues={{remember: true}}
                    style={{maxWidth: 360}}
                    onFinish={onFinish}>

                    <Form.Item
                        name="username" initialValue={loginRequest.username}
                        rules={[{required: true, message: '请输入登录帐号'}]}>
                        <Input
                            prefix={<UserOutlined/>} placeholder="帐号" size={"large"}
                            onChange={(e) => (loginRequest.username = e.target.value)}/>
                    </Form.Item>

                    <Form.Item
                        name="password" initialValue={loginRequest.password}
                        rules={[{required: true, message: '请输入登录密码'}]}>
                        <Input
                            prefix={<LockOutlined/>} type="password" placeholder="密码" size={"large"}
                            onChange={(e) => (loginRequest.password = e.target.value)}/>
                    </Form.Item>

                    <Form.Item
                        name="loginCode" initialValue={loginRequest.loginCode}
                        rules={[{required: true, message: '请输入图片验证码'}]}>
                        <Input
                            placeholder="验证码" size={"large"}
                            onChange={(e) => (loginRequest.loginCode = e.target.value)}
                            suffix={
                                <img
                                    onClick={onRefreshLoginCode} src={loginCodeResponse?.image || ''}
                                    style={{width: '115px', height: '20px', cursor: 'pointer'}} alt={'code'}/>
                            }/>
                    </Form.Item>

                    <Form.Item>
                        <Flex justify="space-between" align="center">
                            <Form.Item name="remember" valuePropName="checked" noStyle>
                                <Checkbox>记住我</Checkbox>
                            </Form.Item>
                            <a href="">忘记密码</a>
                        </Flex>
                    </Form.Item>

                    <Form.Item>
                        <Button block type="primary" htmlType="submit">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </>
        )
    }

    return (
        <>
            {contextHolder}
            <div className={styles.rootContainer}>
                <div className={styles.rootContainerLeft}>
                    <img src={bg} alt="bg" style={{width: '100%', objectFit: 'cover'}}/>
                </div>

                <div className={styles.rootContainerRight}>
                    <div className={styles.logoLayout}>
                        <img src={logo} alt='logo'/>
                        <h3>游戏接入平台</h3>
                    </div>
                    <div className={styles.formLayout}>
                        <FormView/>
                    </div>
                </div>
            </div>
        </>
    );
}

export default Login;